import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link} from 'react-router';
import './list.scss';
class AuctionItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    let startTime = new Date(),nowTime = new Date();
    startTime.setTime(this.props.item.start_time*1000);
    let startTimeFormat=(startTime.getFullYear() == nowTime.getFullYear()?'':(startTime.getFullYear()+'-'))+(startTime.getMonth()+1)+'-'+startTime.getDate()+' '+startTime.getHours()+':'+startTime.getMinutes();
    return (
      <li className="media">
        <div className="media-left">
          <Link to={`/detail/${this.props.item.id}`}>
            <img className="media-object car-thumb" src={this.props.item.thumb ? CBH.imgUploadPath +'/data/upload/'+ this.props.item.thumb : ''}/>
          </Link>
        </div>
        <div className="media-body">
          <p>{this.props.item.title}</p>
          <p>起拍价 :<span>{this.props.item.start_price}</span></p>
          <p>{this.props.item.adwords}</p>
          {/* <p>{startTimeFormat}</p> */}
          <div className="row">
            <div className="col-xs-12" style={{
              paddingRight: 0
            }}>
              <Link className="list-page-info-link" to={`/detail/${this.props.item.id}`}>查看详情</Link>
            </div>
          </div>
        </div>
      </li>
    );
  }
}
class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 0,
      data: [],
      sortField: 'time', //time; price
      sortType: 0, //0 降序;1 升序；
      minPrice: 0,
      maxPrice: 0
    };
    this.loadData = this.loadData.bind(this);
  }
  loadData(sortType, sortField, minPrice, maxPrice) {
    $.get(CBH.apiRoot + "/?g=Api&m=CommonProduct&a=products&p=" + this.props.page + "&size=" + (this.props.size | 10) + "&sortfield=" + (sortField | this.state.sortField) + "&sorttype=" + (sortType | this.state.sortType) + "&minprice=" + (minPrice | this.state.minPrice) + "&maxprice=" + (maxPrice | this.state.maxPrice) + "&uid=" + CBH.UserInfo.id, function(result) {
      this.setState(result);
    }.bind(this), 'jsonp');
  }
  componentWillMount() {
    $('.dropdown').dropdown('toggle');
  }
  componentDidMount() {
    this.loadData();
    let that = this;

    $(".dropdown-menu li a").click(function() {
      // 选择点击更改
      let initMinPrice = $('.min-price').val()*1 | 0,
      initMaxPrice = $('.max-price').val()*1 | 0;
      $(this).parents(".dropdown").find('.sel-btn').html($(this).text() + ' <span class="caret"></span>');
      $(this).parents(".dropdown").find('.sel-btn').val($(this).data('value'));
      that.loadData($(this).data('sorttype'), $(this).data('sortfield'), initMinPrice, initMaxPrice);
    });
  }
  render() {
    let items = this.state.data.map((item) => <AuctionItem item={item} key={item.id}/>)
    return (
      <div className="container">
        <div className="row">
          <section className="list-block-page">
            <div className="col-xs-12">
              <div className="list-query">
                <div className="dropdown dropdown-query">
                  <button className="sel-btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    时间从先到后
                    <span className="caret"></span>
                  </button>
                  <ul className="dropdown-menu" aria-labelledby="dLabel">
                    <li>
                      <a href="javascript:;" data-sorttype="0" data-sortfield="time">时间从先到后</a>
                    </li>
                    <li>
                      <a href="javascript:;" data-sorttype="1" data-sortfield="time">时间从后到先</a>
                    </li>
                    <li>
                      <a href="javascript:;" data-sorttype="0" data-sortfield="price">价格从低到高</a>
                    </li>
                    <li>
                      <a href="javascript:;" data-sorttype="1" data-sortfield="price">价格从高到低</a>
                    </li>
                  </ul>
                </div>

                {/* <div className="price-query">
                  <span>起拍价 </span>
                  <input type="tel" className="min-price" ref="min_price" placeholder="不限"/>
                  <span> ~ </span>
                  <input type="tel" className="max-price" ref="max_price" placeholder="不限"/>
                  <span></span>
                </div> */}
              </div>
            </div>
            {/* list query end */}
            <div className="col-xs-12">
              <ul className="media-list car-list-info">
                {items}
                <Link className="block-link back-link" to="/">返回</Link>
              </ul>
            </div>
            {/* </div> */}
            {/* <h4 className="back_btn">

            </h4> */}
          </section>
        </div>
      </div>
    );
  }
}
export default List
